<template>
	<view style="padding-bottom: 40rpx;background-color: #F8F8F8;">
		<view class="top-background">

		</view>

		<view class="back-arrow" :style="{'padding-top': paddingTop}">
			<uni-icons @click="toBackPage" style="margin-left: 30rpx;" type="left" size="30" color="#FFFFFF">
			</uni-icons>
			<view style="display: flex;flex-direction: row;">
				<uni-icons @click="toEditPoint" v-if="point.isMine" style="margin-right: 30rpx;" type="compose"
					size="30" color="#ffffff"></uni-icons>
				<uni-icons style="margin-right: 30rpx;" @click="toCollect" type="star" size="30" color="#FFFFFF">
				</uni-icons>
				<uni-icons style="margin-right: 30rpx;" @click="toShareQuestion" type="more-filled" size="30"
					color="#FFFFFF">
				</uni-icons>
			</view>
		</view>
		<view class="question-info">
			<view style="display: flex; flex-direction: column;width: 690rpx;margin-left: 30rpx;">
				<view
					style="font-size: 120%; color: #ffffff; font-weight: bold; margin-top: 20rpx; margin-bottom: 10rpx">
					{{ question.title }}
				</view>
				<rich-text :nodes="question.context" :class="{'limit-line' : isOut && isNotShow}"
					style="line-height: 50rpx;font-size: 100%; margin-top: 10rpx;color: #eeeeee;">
				</rich-text>
				<text v-if="isOut && isNotShow" @click="showAll" class="option-text">展开</text>
				<text v-if="isOut && !isNotShow" @click="showAll" class="option-text">收起</text>
			</view>
		</view>

		<view class="answers">

			<view style="margin: 30rpx 40rpx 30rpx 40rpx;margin-bottom: 40rpx;">
				<userInfoCard :userInfo="point.userInfo"></userInfoCard>
			</view>

			<view class="point card" style="width: 690rpx;margin-left: 30rpx;margin-top: 20rpx;">
				<view class="content">
					{{ point.keyword }}
				</view>
				<view class="bottom">
					<view>回答数：{{ queryInput.total }}</view>
					<view>发布于：{{ point.gmtCreate  | gmtToDate}}</view>
				</view>
			</view>









			<view class="answer-list">

				<view class="card answer" v-if="answers == null || answers.length == 0 ">

					<view class="sort">
						<view v-for="(item,index) in sortTypes">
							<view @click.stop="changeSortType(index)" class="type-item"
								:class="index == currentSortTypeIndex ? 'type-item-current': '' ">
								{{sortTypes[index].text}}
							</view>
						</view>
					</view>

					<view
						style="width: 100%;height: 100rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;">
						暂无更多内容
					</view>

				</view>

				<view v-for="(item, index) in answers" :key="index">
					<view class="card answer" @click="toAnswerDetail(item.id)">

						<view v-if="index == 0" class="sort">
							<view v-for="(item,index) in sortTypes">
								<view @click.stop="changeSortType(index)" class="type-item"
									:class="index == currentSortTypeIndex ? 'type-item-current': '' ">
									{{sortTypes[index].text}}
								</view>
							</view>
						</view>

						<view class="answer-top">
							<view class="user-info">
								<image mode="aspectFill" style="width: 50rpx;height:50rpx;border-radius: 50%;"
									:src="item.avatar"></image>
								<view style="margin-left: 20rpx;">{{item.nickname}}</view>
							</view>
						</view>
						<view class="content">
							<rich-text :nodes="item.content"></rich-text>
						</view>
						<view class="bottom">
							<view style="display: flex;flex-direction: row;">
								<view>点赞：{{item.likeCount}}</view>
								<view style="margin-left: 10rpx;">评论：{{item.commentCount}}</view>
							</view>
							<view>发布于：{{item.gmtCreate | gmtToDate}}</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 		<view style="display: flex; flex-direction: row; justify-content: space-between">
				<view style="font-size: 130%; color: #1244de; font-weight: bold; margin-top: 30rpx">所有回答</view>
				<view v-if="showAnswerAdd == 0" class="myButton" @tap="toAddAnswer"
					style="width: 150rpx; margin-top: 25rpx">新增回答</view>
				<view v-if="showAnswerAdd == 1" class="myButton" @tap="addAnswer" style="width: 150rpx; margin-top: 25rpx">
					提交回答</view>
			</view>
			<view v-if="showAnswerAdd == 1" class="card" style="display: flex; flex-direction: column; margin-bottom: 30rpx; margin-top: 30rpx">
				<view class="mind-date">输出一个回答</view>
				<kn-edit ref="contentEdit" :pageScrollTop="pageScrollTop" v-model="content"></kn-edit>
			</view> -->
		</view>



		<uni-popup ref="more" type="bottom">
			<view class="popup">
				<view class="top">
					<view class="title">分享问题</view>
					<view class="close">
						<!-- <image mode="aspectFill" :src="option.cover"></image> -->
					</view>
				</view>
				<view class="options">
					<view class="option-list">
						<view v-for="option in options_share">
							<view class="option">
								<image mode="aspectFill" class="img" :src="option.cover"></image>
								<view class="text">{{option.text}}</view>
							</view>
						</view>
					</view>
					<view class="option-list" style="overflow: scroll;">
						<view v-for="option in options_edit">
							<view class="option">
								<image mode="aspectFill" class="img" :src="option.cover"></image>
								<view class="text">{{option.text}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="questionDetail" type="center">
			<view class="modal-box">
				<view
					style="font-size: 120%; color: #2c2c2c; font-weight: bold; margin-top: 20rpx; margin-bottom: 10rpx">
					{{ question.title }}
				</view>
				<rich-text :nodes="question.context" :class="{'limit-line' : isOut && isNotShow}"
					style="line-height: 50rpx;font-size: 100%; margin-top: 10rpx;color: #2c2c2c;">
				</rich-text>
			</view>
		</uni-popup>


		<view class="comment-input" :style="{ 'margin-bottom' : isFocus ? '30rpx' : '0' }">
			<view class="tag-area" @click="toAddAnswer()">
				<view class="tag"></view>
				<view class="tag-text">回答</view>
			</view>
			<view class="content" :style="{ height:inputMind.lineCount*40+'rpx' }">
				<textarea class="content-textarea" v-model="inputMind.content" placeholder="输出你的思考"
					@linechange="lineChange" :show-confirm-bar="false"
					:style="{ height:inputMind.lineCount*40+'rpx' }" />
			</view>
			<view class="input-button" @click="createMind()">生成</view>
		</view>

	</view>
</template>

<script>
	import http from '@/common/service/service.js';
	import userInfoCard from '@/components/user-info-card.vue'
	export default {
		components: {
			userInfoCard
		},
		data() {
			return {
				title: '',
				context: '',
				questionId: '',


				showAnswerAdd: 0,
				pageScrollTop: 0,
				content: '',

				question: {},
				point: {},

				queryInput: {
					pageNow: 1,
					pageSize: 20,
					pointId: '',
					orderEnum: "DEFAULT"
				},
				answers: [],

				isFocus: false,
				keyHei: 0,


				mindDeepColor: ['#e7e7e7', '#b9b9b9', '#636363', '#000000'],

				sortTypes: [{
						text: "默认",
						value: "DEFAULT"
					},
					{
						text: "最新",
						value: "NEW"
					}, {
						text: "我的",
						value: "ME"
					}
				],

				currentSortTypeIndex: 0,

				options_share: [{
					text: "微信好友",
					cover: "../../static/share/wechat.png"
				}, {
					text: "qq好友",
					cover: "../../static/share/qq.png"
				}, {
					text: "复制链接",
					cover: "../../static/share/link.png"
				}],

				options_edit: [{
					text: "修改观点",
					cover: "../../static/share/edit.png"
				}, {
					text: "举报问题",
					cover: "../../static/share/report.png"
				}, {
					text: "邀请回答",
					cover: "../../static/share/invite.png"
				}, {
					text: "夜间模式",
					cover: "../../static/share/night.png"
				}, {
					text: "删除观点",
					cover: "../../static/share/delete.png"
				}],

				inputMind: {
					content: "",
					lineCount: 1,

				},

				isOut: true,
				isNotShow: true,

				paddingTop: null
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {
			this.question.id = options.questionId
			this.point.id = options.pointId
			this.queryInput.pointId = options.pointId

			this.getQuestionInfo()
			this.getPointInfo()
			this.pageAnswer()
			uni.onKeyboardHeightChange((res) => {
				this.keyHei = res.height
			})

			// 调整搜索位置
			// #ifdef MP-WEIXIN
			// 1.获取屏幕可使用宽度
			let windowWidth = uni.getSystemInfoSync().windowWidth;
			// 3.获取胶囊按钮位置信息
			const menuButton = uni.getMenuButtonBoundingClientRect();
			// // 5.导航栏与状态栏拉开距离  margin-top: statusBarTop + 'rpx';
			this.paddingTop = menuButton.top * (750 / windowWidth) + 'rpx';
			// #endif
		},

		onShow() {
			this.getQuestionInfo()
			this.getPointInfo()
			this.pageAnswer()
		},

		filters: {
			gmtToDate(gmt) {
				let fmt = "YYYY-mm-dd HH:MM";
				let date = new Date(parseInt(gmt));
				console.log("执行", date, gmt, parseInt(gmt))
				let ret;
				const opt = {
					"Y+": date.getFullYear().toString(), // 年
					"m+": (date.getMonth() + 1).toString(), // 月
					"d+": date.getDate().toString(), // 日
					"H+": date.getHours().toString(), // 时
					"M+": date.getMinutes().toString(), // 分
					"S+": date.getSeconds().toString(), // 秒
					// 有其他格式化字符需求可以继续添加，必须转化成字符串
				};
				for (let k in opt) {
					ret = new RegExp("(" + k + ")").exec(fmt);
					if (ret) {
						fmt = fmt.replace(
							ret[1],
							ret[1].length === 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
						);
					}
				}
				return fmt;
			}
		},


		Scroll(e) {
			console.log(e)
			this.pageScrollTop = e.scrollTop
		},
		methods: {
			getQuestionInfo() {
				this.$api.getQuestionInfo({
					id: this.question.id
				}).then(res => {
					console.log(res);
					this.question = res.data
				})
			},

			getPointInfo() {
				this.$api.getPointInfo({
					id: this.point.id
				}).then(res => {
					console.log(res);
					this.point = res.data
				})
			},
			pageAnswer() {
				this.$api.pageAnswer(this.queryInput).then(res => {
					this.answers = res.data.rows
					this.queryInput.total = res.data.total
				})
			},




			showAll() {
				this.$refs.questionDetail.open('center')
			},


			showMore() {
				this.$refs.more.open()
			},
			closeMore() {
				this.$refs.more.close()
			},



			toAddAnswer() {
				uni.navigateTo({
					url: "/pages_modex/question/answer-add?questionId=" + this.question.id + "&pointId=" + this
						.point.id + "&content=" + this
						.inputMind.content
				})
			},

			lineChange(e) {
				this.inputMind.lineCount = e.detail.lineCount
				this.$forceUpdate()
			},

			createMind() {
				this.$api.createMind({
					content: this.inputMind.content
				}).then(res => {
					uni.showToast({
						icon: 'success'
					})
					this.inputMind.content = ""
				})
			},


			changeSortType(index) {
				this.currentSortTypeIndex = index
				this.queryInput = this.sortTypes[index].value
				this.pageAnswer()
			},






			toBackPage() {
				uni.navigateBack()
			},


			toAnswerDetail(answerId) {
				uni.navigateTo({
					url: "/pages_modex/question/answer-detail?questionId=" + this.question.id + "&pointId=" + this
						.point.id + "&answerId=" + answerId
				})
			},

			toEditPoint() {
				uni.navigateTo({
					url: "/pages_modex/question/point-add?pointId=" + this.point.id + "&questionId=" + this
						.question.id
				})
			},

			navigateBack() {
				uni.navigateBack()
			},


			messageInput() {
				console.log('占位：函数 messageInput 未声明');
			}
		},
		watch: {
			keyHei(val) {
				console.log('keyHei change!', val)
				if (val) {
					this.isFocus = true
				} else {
					this.isFocus = false
				}
			},
		}
	};
</script>
<style scoped lang="scss">
	page {
		background-color: #F8F8F8;
	}

	.top-background {
		position: fixed;
		z-index: 1;
		width: 100%;
		height: 600rpx;
		background: linear-gradient(#1E5D72, #5DACB1, #a7cfce);
	}

	.back-arrow {
		width: 100%;
		//#ifdef MP-WEIXIN
		width: 550rpx;
		//#endif

		padding-top: 100rpx;

		// #ifdef H5
		padding-top: 40rpx;
		// #endif

		height: 60rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		z-index: 3;
		position: relative;
	}

	.question-info {
		z-index: 2;
		position: relative;

		.limit-line {
			/*超过范围进行隐藏不显示*/
			overflow: hidden;
			/*文本溢出, 使用省略号 */
			text-overflow: ellipsis;
			/* 以webkit盒子展示, 比较适用于webkit内核和移动端*/
			display: -webkit-box;
			/*限制块容器显示的文本行数, 按照你的需求设置*/
			-webkit-line-clamp: 3;
			/*盒子的方向, 垂直、水平等*/
			-webkit-box-orient: vertical;
			/*文字换行, 可以在单词内断*/
			word-wrap: break-word;
		}

		.option-text {
			position: relative;
			left: 630rpx;
			bottom: 40rpx;
			z-index: 5;
			color: #ffffff;
			// box-shadow: 0px 0px 30rpx 10rpx #ffffff;
			background-color: rgba(105, 178, 182, 1)
		}

		.counts-follow {
			width: 690rpx;
			margin-left: 30rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 30rpx;

			.counts {
				display: flex;
				flex-direction: row;
				font-size: 26rpx;
				color: #eeeeee;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				.item {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					width: 150rpx;
					height: 80rpx;

					.item-top {
						font-size: 32rpx;
						color: #eeeeee;
					}

					.item-bottom {
						font-size: 28rpx;
						color: #eeeeee;
					}
				}

				.split-line {
					width: 3rpx;
					height: 60rpx;
					background-color: #d1d1d1;
				}
			}

			.follow {
				background-color: #DAEFEE;
				// box-shadow: 0px 0px 5rpx 3rpx #eeeeee;
				color: #144C5D;
				padding: 10rpx 30rpx;
				border-radius: 40rpx;
			}
		}
	}



	.popup {
		padding: 20rpx 30rpx 60rpx 30rpx;
		background-color: #ffffff;
		border-radius: 20rpx 20rpx 0 0;
		min-height: 200rpx;

		.top {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;

			.title {
				font-weight: bold;
			}

			.close {}
		}

		.options {
			display: flex;
			flex-direction: column;
			margin-top: 10rpx;

			.option-list {
				display: flex;
				flex-direction: row;
				margin-top: 30rpx;

				.option {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					margin-right: 30rpx;

					.img {
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
					}

					.text {
						margin-top: 10rpx;
						font-size: 24rpx;
					}
				}


			}




		}
	}




	.answers {
		position: relative;
		z-index: 2;
		width: 100%;
		border-radius: 25rpx 25rpx 0 0;
		padding-top: 20rpx;
		padding-bottom: 160rpx;
		background-color: #F9F9F9;
		min-height: 60vh;

		.point {
			display: flex;
			flex-direction: column;
			margin-top: 30rpx;
			margin-bottom: 30rpx;

			.point-top {
				padding-top: 30rpx;
				margin-left: 20rpx;
				margin-right: 20rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				.user-info {
					display: flex;
					flex-direction: row;
					align-items: center;
				}

				.button {
					width: 140rpx;
					height: 60rpx;
					border: solid thin #5DACB1;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					color: #5DACB1;
					border-radius: 40rpx;
				}

			}

			.content {
				margin-left: 20rpx;
				margin-top: 20rpx;
			}

			.bottom {
				margin: 20rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				color: gray;
				font-size: 24rpx;
			}
		}


		.answer-list {
			margin-top: 20rpx;
			width: 690rpx;
			margin-left: 30rpx;

			.answer {
				display: flex;
				flex-direction: column;
				margin-bottom: 30rpx;

				.sort {
					margin-top: 20rpx;
					width: 690rpx;

					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					height: 60rpx;
					align-items: center;
					padding-bottom: 8rpx;
					border-bottom: solid thin #e3e3e3;


					.type-item {
						margin-left: 30rpx;
						margin-right: 20rpx;
						color: gray;
						font-size: 32rpx;
					}

					.type-item-current {
						color: #41868C;
						border-bottom: solid 5rpx #41868C;
						font-weight: bold;
						padding-top: 13rpx;
						padding-bottom: 13rpx;
					}
				}


				.answer-top {
					padding-top: 30rpx;
					margin-left: 20rpx;
					margin-right: 20rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					.user-info {
						display: flex;
						flex-direction: row;
						align-items: center;
						color: gray;
					}

				}

				.content {
					margin-left: 20rpx;
					margin-top: 20rpx;

					/*超过范围进行隐藏不显示*/
					overflow: hidden;
					/*文本溢出, 使用省略号 */
					text-overflow: ellipsis;
					/* 以webkit盒子展示, 比较适用于webkit内核和移动端*/
					display: -webkit-box;
					/*限制块容器显示的文本行数, 按照你的需求设置*/
					-webkit-line-clamp: 4;
					/*盒子的方向, 垂直、水平等*/
					-webkit-box-orient: vertical;
					/*文字换行, 可以在单词内断*/
					word-wrap: break-word;
				}

				.bottom {
					margin: 20rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					color: gray;
					font-size: 24rpx;
				}
			}
		}

	}



	.card {
		background-color: #FFFFFF;
		// box-shadow: 1px 1px 8px 2px #FFFFFF;
		border-radius: 10rpx;
		min-height: 50rpx;
	}

	.page-btns {
		display: flex;
		position: fixed;
		right: 100rpx;
		bottom: 100rpx;
		z-index: 10;
	}

	.myButton {
		color: white;
		border-radius: 20rpx;
		background-color: #1244de;
		box-shadow: 1px 1px 8px 2px #c8cec8;
		font-size: 80%;
		font-weight: bold;
		height: 60rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.mind-date {
		color: gray;
		font-size: 70%;
		margin-left: 20rpx;
		margin-right: 10rpx;
		margin-top: 20rpx;
	}

	.modal-box {
		width: 600rpx;
		max-height: 800rpx;
		margin-top: 200rpx;
		overflow-y: scroll;


		padding: 40rpx;
		border-radius: 20rpx;
		background: white;

		display: flex;
		flex-direction: column;

		text-align: left;
	}

	.comment-input {
		width: 750rpx;
		position: fixed;
		z-index: 2;
		bottom: 0;

		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: flex-end;
		padding: 30rpx 0;

		background-color: #ffffff;
		border-top: 1px solid #d5d5d5;

		.tag-area {

			width: 50rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;


			.tag {
				height: 35rpx;
				width: 35rpx;
				border: solid thin gray;
				border-radius: 10rpx;
				margin-bottom: 5rpx;

			}

			.tag-text {
				font-size: 20rpx;
			}

		}

		.content {
			width: 500rpx;
			max-height: 420rpx;
			padding: 20rpx;

			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;


			border: 1rpx solid #d5d5d5;
			border-radius: 10rpx;

			.content-textarea {
				width: 100%;
				margin-bottom: 10rpx;
				margin-top: 10rpx;
				max-height: 400rpx;
				overflow: scroll;
			}
		}

		.input-button {
			width: 70rpx;
			margin-bottom: 20rpx;
			color: gray;
		}
	}

	image {
		height: 100%;
		width: 100%;
	}
</style>
